<template>
  <div class="page" style="">
    <div class="print_title">岗位申请表详情 · 禾美环保</div>
    <p class="title">基本信息</p>
    <a-row type="flex" justify="start" class="content" style="padding: 0 9px; margin: 0 0 14px 0;">
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >单据编号:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.billNo }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row>
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请人:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applicationId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>

      <a-col :span="12">
        <a-row style="margin-bottom: 0">

          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请部门:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.applicationDeptId_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请时间:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.createTime }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >申请团队:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.teamId_dictText?formData.teamId_dictText:formData.teamId }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >编制人数:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.staffingQuantity }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >实际人数:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.practicalQuantity }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >所需人数:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.requireQuantity }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="12">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >增岗事由:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.requireReason_dictText }}</p>
          </a-col>
        </a-row>
      </a-col>
      <a-col :span="24">
        <a-row style="margin-bottom: 0">
          <a-col style="display: flex;">
            <p style="margin-bottom: 0; white-space: nowrap" >备注:</p>
            <p style="margin:0 0 0 6px; word-break: break-all;">{{ formData.remark }}</p>
          </a-col>
        </a-row>
      </a-col>
    </a-row>

    <!-- 物品领用明细列表 -->
    <a-row type="flex" justify="center" v-if="formData.itemList && formData.itemList.length">
      <a-col>
        <p class="title_table">岗位明细</p>
      </a-col>
      <a-col :span="24">
        <a-table
          :columns="columns"
          :data-source="formData.itemList"
          bordered
          :pagination="false"
          size="small"
          :rowClassName="tableRowClass"></a-table>
      </a-col>
    </a-row>

    <!-- 附件信息 -->
    <FileInfor :purchaseFile="purchaseFile" v-if="purchaseFile && purchaseFile.length"></FileInfor>
    <!-- 流程详情 -->
    <ProcessInfor v-if="formData.bpmStatus !== '1'" :dataHistorySource="dataHistorySource"></ProcessInfor>
  </div>
</template>
<script>
import { filterMultiDictText, initDictOptions } from '@/components/dict/JDictSelectUtil'
  import { getAction } from '@/api/manage'
  import FileInfor from '@/components/print/FileInfor.vue' // 审批历史流程列表组件
  import ProcessInfor from '@/components/print/ProcessInfor.vue' // 审批历史流程列表组件
  export default {
    props: {
      formBpm: {
        type: Boolean,
        default: false
      },
      formData: {
        type: Object,
        default: () => {},
        required: true
      },
      formDataHistory: {
        type: Object,
        default: () => {},
        required: true
      }
    },
    components: {
      FileInfor,
      ProcessInfor
    },
    data() {
      return {
        dictOptions: {},
        columns: [
          {
            title: '序号',
            dataIndex: '',
            key: 'rowIndex',
            width: 45,
            align: 'center',
            customRender: function (t, r, index) {
              return parseInt(index) + 1
            }
          },
          {
            title: '岗位序列',
            align: 'center',
            width: 65,
            dataIndex: 'positionCategory',
            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['positionCategory'], text + '')
              }
            }
          },
          {
            title: '岗位名称',
            align: 'center',
            width: 65,
            dataIndex: 'postId',
            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['postId'], text + '')
              }
            }
          },
          {
            title: '工作地点',
            align: 'center',
            dataIndex: 'workAddress'
          },
          {
            title: '所需人数',
            align: 'center',
            width: 65,
            dataIndex: 'requireQuantity'
          },
          {
            title: '学历要求',
            align: 'center',
            width: 65,
            dataIndex: 'educationalRequirements',
            customRender: (text, r) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['educationalRequirements'], text + '')
              }
            }
          },
          {
            title: '性别要求',
            align: 'center',
            width: 65,
            dataIndex: 'sexRequirements',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['sexRequirements'], text + '')
              }
            }
          },
          {
            title: '专业要求',
            align: 'center',
            width: 65,
            dataIndex: 'professionalRequirement',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['professionalRequirement'], text + '')
              }
            }
          },
          {
            title: '工作经验',
            align: 'center',
            width: 65,
            dataIndex: 'workExperience',
            customRender: (text) => {
              if (!text) {
                return ''
              } else {
                return filterMultiDictText(this.dictOptions['workExperience'], text + '')
              }
            }
          },
          {
            title: '薪资区间(元)',
            align: 'center',
            width: 65,
            dataIndex: 'salarySection'
          },
          {
            title: '期待到岗时间',
            align: 'center',
            width: 90,
            dataIndex: 'expectationTime'
          }

        ],
        dataHistorySource: [], // 流程列表
        url: {
            historyList: '/api/erpmng/act/task/processHistoryList', // 流程历史跟踪接口
            queryById: '/api/erp/administration/seal/erpSealAuthorizationInformation/queryById' // 獲取詳情
        },
        purchaseFile: [], // 附件
        ids_dictText: '' // 印章
      };
    },
    watch: {
      formData: {
        handler (val) {
            if (val) {
              this.getHistoryList()
              this.initDictConfig()
              if (val.attachments) {
                this.purchaseFile = val.attachments.split(',')
              }
            }
        },
        immediate: true
      },
      formDataHistory: {
        handler (val) {
          if (val) {
              this.getHistoryList()
          }
        },
        immediate: true
      }
    },
    methods: {
      // 获取列表
      getHistoryList() {
        var params = { processInstanceId: this.formDataHistory.procInsId };// 查询条件
        getAction(this.url.historyList, params).then(res => {
            if (res.success) {
                this.dataHistorySource = res.result.records || res.result
            }
        })
      },

      // 加载数据字典信息
      initDictConfig() {
        initDictOptions('sys_position,name,id').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'postId', res.result)
          }
        })
        initDictOptions('position_category').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'positionCategory', res.result)
          }
        })
        // initDictOptions('sys_depart,name,id').then((res) => {
        //   if (res.success) {
        //     this.$set(this.dictOptions, 'workAddress', res.result)
        //   }
        // })
        initDictOptions('educational_requirements').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'educationalRequirements', res.result)
          }
        })
        initDictOptions('sex_requirements').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'sexRequirements', res.result)
          }
        })
        initDictOptions('professional_requirement').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'professionalRequirement', res.result)
          }
        })
        initDictOptions('work_experience').then((res) => {
          if (res.success) {
            this.$set(this.dictOptions, 'workExperience', res.result)
          }
        })
      },

      tableRowClass(record, index) {
        console.log('record, index', record, index)
        if (index == 0) {
            return 'rowClass';
        }
        return ''
      }
    }
  };
</script>
<style lang="less" scoped>
  .page{
    background: #ffffff;
    padding: 19px 28px 0 28px;
    width: 750px;
    .print_title{
        font-size: 15px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 9px;
    }
    .title {
        background: #EEEEEE;
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
        padding: 11px 9px;
    }
    .content {
        font-size: 13px;
    }

    .title_table{
        font-size: 13px;
        font-family: Alibaba PuHuiTi 2.0;
        font-weight: normal;
        color: #000000;
    }
  }
  /deep/ .rowClass{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead th{
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-thead tr{
      background: #EEEEEE;
  }
  /deep/ .ant-table-small > .ant-table-content > .ant-table-body {
      margin: 0 0px;
  }
  /deep/ .ant-table-body tr {
      font-size: 10px;
      font-family: Alibaba PuHuiTi 2.0;
      font-weight: normal;
      color: #000000;
  }
  /deep/ .ant-table-body tr td {
    word-wrap:break-word;
    word-break:break-all;
  }
</style>
